<script setup>
import { ref, reactive, onMounted, unref, watch, computed } from 'vue'
import { formatColumn } from '@/utils/tools.js'
import { claimFileColumns } from '@/views/home/component/home.data.js'
import { useAccountStore } from '@/stores/account'
import { queryClaimMissList, queryClaimEmail } from '@/api/home'
const props = defineProps({
  claimNo: {
    type: [String, Number],
    required: ''
  },
  claimUrl: {
    type: String,
    required: ''
  }
})
const accountStore = useAccountStore()
const isEyeOpen = computed(() => {
  return accountStore.DESENSITIZATION
})
const fileOpen = defineModel('fileOpen')

let missLoading = ref(false)
// 理赔缺失件-table数据
let claimMissFileData = ref([])
async function getClaimMissData() {
  let res = null
  missLoading.value = true
  try {
    const data = {
      desensitization: unref(isEyeOpen) ? '02' : '01',
      model: {
        claimNumber: props.claimNo
      }
    }
    res = await queryClaimMissList(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    missLoading.value = false
  }
  if (res?.isSuccess) {
    claimMissFileData.value = res.data
  }
}
let fileInfo = ref({
  firstRegMailSendStatus: null,
  firstRegMailReceiveAddr: null,
  firstRegMailSender: null,
  lastRegMailSendDate: null
})
// 获取缺失件-邮件信息
async function getCiaimMissEmailInfo() {
  let res = null
  try {
    const data = {
      claimNumber: props.claimNo
    }
    res = await queryClaimEmail(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    const {
      firstRegMailSendStatus,
      firstRegMailReceiveAddr,
      firstRegMailSender,
      lastRegMailSendDate
    } = res.data
    fileInfo.value.firstRegMailSendStatus = firstRegMailSendStatus
    fileInfo.value.firstRegMailSender = firstRegMailSender
    fileInfo.value.firstRegMailReceiveAddr = firstRegMailReceiveAddr
    fileInfo.value.lastRegMailSendDate = lastRegMailSendDate
  }
}
onMounted(() => {
  getClaimMissData()
  getCiaimMissEmailInfo()
})
// 理赔号跳转
function toCheckClaims(url) {
  if (!url) return
  window.open(url)
}
</script>
<template>
  <a-drawer
    v-model:open="fileOpen"
    class="claim-file-info-drawer"
    root-class-name="root-class-name"
    title="理赔缺件页"
    width="70%"
    placement="right"
    :maskClosable="false"
  >
    <div class="claimNo">
      理赔号：
      <span class="claim-miss-link" @click="toCheckClaims(claimUrl)">
        {{ claimNo }}
      </span>
    </div>
    <div class="file-drawer-tip" v-if="fileInfo.firstRegMailSendStatus == '01'">
      登记邮件已发送，接受邮件地址：{{ formatColumn(fileInfo.firstRegMailReceiveAddr) }}，发送人：
      {{ formatColumn(fileInfo.firstRegMailSender) }}，最后一次发送时间：
      {{ formatColumn(fileInfo.lastRegMailSendDate) }}。
    </div>
    <a-table
      class="ant-table-miss-striped"
      :columns="claimFileColumns"
      :loading="missLoading"
      size="middle"
      :data-source="claimMissFileData"
      :pagination="false"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'missingDocRemark'">
          <span class="break-word">{{ formatColumn(text) }}</span>
        </template>
      </template>
    </a-table>
  </a-drawer>
</template>
<style lang="scss">
.claim-file-info-drawer {
  .ant-table-cell {
    word-break: break-all;
  }

  .ant-drawer-close {
    position: absolute;
    right: 10px;
  }
  .claimNo {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 14px;
    color: $color-text-primary;
    margin-bottom: 21px;
  }
  .claim-miss-link {
    cursor: pointer;
    text-decoration: underline;
    color: $color-action;
  }
  .file-drawer-tip {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    color: $color-text-regular;
  }
}
</style>
